<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Google AJAX Search API 实例 - 绘制模式</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style>
      fieldset {
        float: left;
      }
    </style>
  </head>
  
  <body>
    <fieldset>
      <legend>分页模式</legend>
      <div id="content-tabbed">正在加载...</div>
    </fieldset>
    <fieldset>
      <legend>线性模式</legend>
      <div id="content-linear">正在加载...</div>
    </fieldset>

    <script src="http://www.google.cn/jsapi"></script>
    <script>
      google.load('search', '1'); // 加载 AJAX Search API 版本 1
      google.setOnLoadCallback(function() {
        var tabbedSearch = new google.search.SearchControl();
        var linearSearch = new google.search.SearchControl();
        
        tabbedSearch.addSearcher(new google.search.WebSearch());
        tabbedSearch.addSearcher(new google.search.ImageSearch());
        tabbedSearch.addSearcher(new google.search.LocalSearch());
        tabbedSearch.addSearcher(new google.search.NewsSearch());
        tabbedSearch.addSearcher(new google.search.VideoSearch());
        tabbedSearch.addSearcher(new google.search.BookSearch());

        linearSearch.addSearcher(new google.search.WebSearch());
        linearSearch.addSearcher(new google.search.ImageSearch());
        linearSearch.addSearcher(new google.search.LocalSearch());
        linearSearch.addSearcher(new google.search.NewsSearch());
        linearSearch.addSearcher(new google.search.VideoSearch());
        linearSearch.addSearcher(new google.search.BookSearch());

        var tabbedDraw = new google.search.DrawOptions();
        tabbedDraw.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); 
        tabbedSearch.draw(document.getElementById("content-tabbed"), tabbedDraw);
        linearSearch.draw(document.getElementById("content-linear"));
        
        tabbedSearch.execute("天安门");
        linearSearch.execute("天安门");
      });
    </script>
  </body>
</html>